<template>
  <el-card>
    <div id="word-cloud-chart" style="width: 100%; height: 400px" />
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: 'WordCloudChart',
  props: {
    wordCloudData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  computed: {
    echartsConfig() {
      return {
        title: {
          text: '留言关键字',
          textStyle: {
            color: '#767676'
          }
        },
        tooltip: {},
        series: [{
          type: 'wordCloud',
          gridSize: 3,
          sizeRange: [16, 32],
          rotationRange: [-90, 90],
          shape: 'cuboid',
          drawOutOfBound: true,
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function() {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')'
            }
          },
          data: this.wordCloudData
        }]
      }
    }
  },
  watch: {
    wordCloudData(oldValue, newValue) {
      this.myChart?.setOption(this.echartsConfig)
    }
  },
  mounted() {
    this.initCharset()
  },
  methods: {
    initCharset() {
      this.$nextTick(() => {
        this.myChart = echarts.init(document.getElementById('word-cloud-chart'))
        this.myChart.setOption(this.echartsConfig)
      })
    }
  }
}
</script>

<style scoped>

</style>
